<template>
    <div id="search">
        <transition-group>
            <div class="history" v-show="cleanAll">
                <div class="title" v-show="isShowHistory">
                    <p>历史搜索</p>
                    <nut-icon
                        name="del2"
                        color="#C1AB96"
                        @click="show1 = true"
                    ></nut-icon>
                </div>
                <!-- 历史搜索内容 -->
                <ul class="historyList">
                    <li
                        v-for="(item, index) in historyList"
                        :key="index"
                        @click="searchAgain(item)"
                    >
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="discover">
                <div class="title">
                    <p>搜索发现</p>
                    <!-- 搜索 显示隐藏切换 -->
                    <nut-icon
                        :name="see ? 'eye' : 'marshalling'"
                        color="#C1AB96"
                        @click="see = !see"
                    ></nut-icon>
                </div>
                <ul class="discoverList" v-if="see">
                    <li>王嘉尔同款</li>
                    <li>iphone14</li>
                    <li>佳能60D</li>
                    <li>3090</li>
                    <li>wassup情侣款</li>
                    <li>GRAfT恤</li>
                    <li>GUCCI</li>
                    <li>香奈儿</li>
                </ul>
                <p class="none">当前搜索发现已隐藏~</p>
            </div>
        </transition-group>

        <!-- 遮盖层 -->
        <nut-overlay
            v-model:visible="show1"
            :z-index="2"
            :close-on-click-overlay="isShow"
        >
            <div class="wrapper">
                <div class="content">
                    <h1>确定删除</h1>
                    <h2>请确认是否删除历史搜索记录，删除后数据将不可恢复。</h2>
                    <div class="doubleB">
                        <p @click="noClean">取消</p>
                        <p @click="clean">删除</p>
                    </div>
                </div>
            </div>
        </nut-overlay>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //   点击弹出遮盖层
            show1: false,
            //   禁用遮盖层外部点击关闭
            isShow: false,
            //点击删除清楚搜索历史
            cleanAll: true,
            //   控制搜索模块显示隐藏
            see: true,
            //   历史搜索数据
            historyList: [],
        };
    },
    mounted() {
        this.historyList = JSON.parse(localStorage.getItem("search"));
    },
    methods: {
        noClean() {
            this.isShow = true;
        },
        clean() {
            this.cleanAll = false;
            this.isShow = true;
            localStorage.clear();
        },
        // 重新搜索
        searchAgain(item) {
            console.log(item);
        },
    },
    computed: {
        // 动态显示历史搜索
        isShowHistory() {
            return Boolean(localStorage.getItem("search"));
        },
    },
};
</script>

<style lang="scss" scoped>
.v-leave-active {
    position: absolute !important;
}
.v-move {
    transition: all 0.5s;
}
#search {
    width: 92vw;
    margin: 0 auto;
    .title {
        margin-top: 9.333vw;
        letter-spacing: 0.15vw;
        width: 100%;
        display: flex;
        justify-content: space-between;
        p {
            color: #000;
            font-size: 3vw;
            font-weight: 620;
        }
        .nut-icon:before {
            top: 50%;
        }
    }
    .historyList {
        display: flex;
        flex-wrap: wrap;
        li {
            margin: 2.933vw 2.933vw 0vw 0vw;
            line-height: 7.467vw;
            box-sizing: border-box;
            padding: 0.267vw 2.667vw 0.267vw 2.667vw;
            border-radius: 3vw;
            height: 7.467vw;
            color: #ffffff;
            background-color: #f8e6d3;
        }
    }
    .discover {
        .discoverList {
            display: flex;
            flex-wrap: wrap;
            li {
                line-height: 10.667vw;
                width: 50%;
            }
        }
        .none {
            text-align: center;
            line-height: 16vw;
            margin: 0 auto;
            color: #f8e6d3;
        }
    }
    //   遮盖层样式
    .wrapper {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        .content {
            box-sizing: border-box;
            padding: 6.933vw 5.867vw 0vw 5.867vw;
            display: flex;
            flex-direction: column;
            width: 63.2vw;
            height: 45.867vw;
            background: #f2f2f2;
            border-radius: 2.133vw;
            justify-content: space-between;
            h1 {
                font-size: 4.8vw;
                font-weight: bolder;
            }
            h2 {
                line-height: 6vw;
                font-size: 3.5vw;
                font-weight: 500;
            }
            .doubleB {
                display: flex;
                height: 8.8vw;
                width: 100%;
                p {
                    width: 50%;
                    text-align: center;
                    line-height: 8.8vw;
                    font-weight: 400;
                    &:nth-child(2) {
                        color: #c1ab96;
                    }
                }
            }
        }
    }
}
</style>